<template>
	<view class="container" style="margin-top: 35rpx;">
		<view class="content">
			<view class="list b-s" v-for="item in matchList" :key="item.id" @click="signMatch(item.id,item.title,item.update,item.startTime)">
				<view class="tu t-top">
					<image :src="item.imageUrl" mode="" class="b-s"></image>
				</view>
				
				<view class="text t-top">
					<text style="font-weight: bold;">{{item.title}}报名</text>
					<p>报名开始时间：{{item.startTime | dateModule}}</p>
					<p>报名截止时间：{{item.update | dateModule}}</p>				
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		competitions
	} from "../../apis"
	export default {
		data() {
			return {
				matchList: []
			}
		},
		onShow() {
			uni.showLoading({
				title: '加载中'
			});
			competitions().then((res) => {
				let [err, data] = res
				this.matchList = data.data.data
				console.log(data.data.data)
				uni.hideLoading()

			})
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中'
			});
			competitions().then((res) => {
				let [err, data] = res
				this.matchList = data.data.data
				console.log(data.data.data)
				uni.hideLoading()

			})
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			signMatch(id, title, update,startTime) {
				console.log(title)
				if ((new Date()).valueOf() > update) {
					uni.showToast({
						title: '该大赛报名时间已截止，请报名下次大赛',
						icon: 'none',
						duration: 3000
					})
				} else if((new Date()).valueOf() < startTime){
						uni.showToast({
							title: '大赛还未开始报名，请等待',
							icon: 'none',
							duration: 3000
						})
					
				}else{
					uni.navigateTo({
						url: '../sign/sign?id=' + id + '&title=' + title
					});
				}

			},
			onShareAppMessage: function(e) {
				let title = '蓝天飞梦小程序'
				return {
					title: title,
					path: 'pages/index/index'
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.list {
			width: 95%;
			height: 90px;
			border: 1px solid #e3e3e3;
			margin: 10px auto;
			position: relative;

			.tu {
				width: 30%;
				height: 90%;
				margin-left: 5px;

				image {
					height: 100%;
					width: 100%;
					border-radius: 6%;
				}
			}

			.text {
				width: 61%;
				right: 10px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			p {
				margin-top: 10px;
				font-size: 12px;
				color: #ccc;
			}
		}
	}
</style>
